<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Node;
use LowCode\Support\JsExp;
use LowCode\Traits\Events\HasOnBlur;
use LowCode\Traits\Events\HasOnClear;
use LowCode\Traits\Events\HasOnConfirm;
use LowCode\Traits\Events\HasOnFocus;
use LowCode\Traits\Props\HasClearable;
use LowCode\Traits\Props\HasDefaultValue;
use LowCode\Traits\Props\HasDisabled;
use LowCode\Traits\Props\HasModel;
use LowCode\Traits\Props\HasPlaceholder;
use LowCode\Traits\Props\HasPlacements;
use LowCode\Traits\Props\HasShow;
use LowCode\Traits\Props\HasSize;
use LowCode\Traits\Props\HasTo;
use LowCode\Traits\Props\HasValueModel;

/**
 * @method static static make()
 */
class TimePicker extends Naive
{
    use HasDefaultValue, HasClearable, HasDisabled, HasShow, HasSize, HasTo, HasValueModel, HasModel, HasPlacements;

    use HasPlaceholder;

    use HasOnBlur, HasOnFocus, HasOnConfirm, HasOnClear;

    /**
     * 通过数组指定显示的小时。当值为 number 时，将被当做时间步进处理
     * @param array|int|JsExp $value number | number[]
     * @return $this
     */
    public function hours(array|int|JsExp $value): static
    {
        return $this->prop("hours",$value);
    }

    /**
     * 通过数组指定显示的分钟。当值为 number 时，将被当做时间步进处理
     * @param array|int|JsExp $value number | number[]
     * @return $this
     */
    public function minutes(array|int|JsExp $value): static
    {
        return $this->prop("minutes",$value);
    }

    /**
     * 通过数组指定显示的秒。当值为 number 时，将被当做时间步进处理
     * @param array|int|JsExp $value number | number[]
     * @return $this
     */
    public function seconds(array|int|JsExp $value): static
    {
        return $this->prop("seconds",$value);
    }

    /**
     * Time Picker 中支持的操作
     * @param array|JsExp|null $actions ['now', 'confirm'] | null
     * @return $this
     */
    public function actions(array|JsExp|null $actions = ['now', 'confirm']): static
    {
        return $this->prop("actions",$actions);
    }

    /**
     * 用于禁用小时的回调函数
     * @param string $value (hour: number) => boolean
     * @param string|null $id
     * @return $this
     */
    public function isHourDisabled(string $value, string $id = null): static
    {
        return $this->jsFunction('is-hour-disabled', $value, $id);
    }

    /**
     * 用于禁用分钟的回调函数，在没有选中值时，hour 是 null
     * @param string $value (minute: number, hour: number | null) => boolean
     * @param string|null $id
     * @return $this
     */
    public function isMinuteDisabled(string $value, string $id = null): static
    {
        return $this->jsFunction('is-minute-disabled', $value, $id);
    }

    /**
     * 用于禁用秒钟的回调函数，在没有选中值时，minute 和 hour 是 null
     * @param string $value (second: number, minute: number | null, hour: number | null) => boolean
     * @return $this
     */
    public function isSecondDisabled(string $value, string $id = null): static
    {
        return $this->jsFunction('is-second-disabled', $value, $id);
    }

    /**
     * 格式化值时使用的市区，遵循 iana time zones 格式。你可以使用 Intl.supportedValuesOf('timeZone') 来查看支持的时区
     * @param string|JsExp $value
     * @return $this
     */
    public function timeZone(string|JsExp $value): static
    {
        return $this->prop('time-zone', $value);
    }

    /**
     * 是否使用 12 小时制的面板
     * @param string|bool $bool
     * @return $this
     */
    public function use12Hours(bool|JsExp $bool = true): static
    {
        return $this->prop('use-12-hours', $bool);
    }

    /**
     * Date Picker 格式化后默认值 string | [string, string] | null
     * @param string|JsExp $value
     * @return $this
     */
    public function defaultFormattedValue(string|JsExp $value): static
    {
        return $this->prop('default-formatted-value', $value);
    }

    /**
     * 格式化之后的值
     * @param string|JsExp $value string | [string, string] | null
     * @return $this
     */
    public function formattedValue(string|JsExp $value): static
    {
        return $this->prop('formatted-value', $value);
    }

    /**
     * 格式化
     * @param string|JsExp $value string
     * @return $this
     */
    public function format(string|JsExp $value): static
    {
        return $this->prop('format', $value);
    }


    /**
     * 验证状态
     * @param string|JsExp $value 'success' | 'warning' | 'error'
     * @return $this
     */
    public function status(string|JsExp $value = 'success' | 'warning' | 'error'): static
    {
        return $this->prop('status', $value);
    }


    /**
     * 绑定值的格式，详情见
     * @param string|JsExp $value
     * @return $this
     */
    public function valueFormat(string|JsExp $value): static
    {
        return $this->prop('value-format', $value);
    }


    /**
     * 设置输入框为只读（避免在移动设备上打开虚拟键盘）
     * @param string|bool $bool
     * @return $this
     */
    public function readonly(bool|JsExp $bool = true): static
    {
        return $this->prop('input-readonly', $bool);
    }


    /**
     * 图标
     * @param Node $node
     * @param array $params
     * @return $this
     */
    public function slotIcon(Node $node, array $params = []): static
    {
        return $this->addSlot($node,'icon', $params);
    }

    /**
     * 发生改变时的回调函数
     * @param string $event 事件
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onUpdateFormattedValue(string $event = "", string $id = null, array $modifiers = []): static
    {
        return $this->event("update:formatted-value", jsFn($event,$id), $modifiers);
    }
}
